<template>
  <div class="form">
    <search-header>
      <template v-slot:left>
        <van-icon name="arrow-left" color="#aaa9a9" @click="goBack" />
      </template>
      <template v-slot:mid>
        <div class="search">
          <span class="icon fa fa-search"></span>
          <input
            ref="input"
            type="text"
            autofocus
            placeholder="请输入菜名或者食材搜索"
            class="search-inp"
            v-model="sName"
          />
        </div>
      </template>
      <template v-slot:right>
        <button class="text" @click="search">搜索</button>
      </template>
    </search-header>
    <div class="search-content">
      <page-history> </page-history>
    </div>
    <div class="inp-result">
      <div class="rnull" v-if="isHasRes">
        <div class="content-box">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="目前没有内容"
          />
        </div>
      </div>
      <ul class="inp-list" v-if="isListShow">
        <li v-for="item in inpList" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import searchHeader from "@/components/search-header.vue";
import PageHistory from "../pages/page-history.vue";
export default {
  name: "search",
  components: {
    searchHeader,
    PageHistory,
  },
  data() {
    return {
      sName: "",
      compName: "searchHistory",
      isListShow: false, //监听输入框的值，在获取到数据时为true,
      isHasRes: false, //监听输入框的值，在没有获取到数据时为true,
      inpList: [], //通过输入框的值获取的数据
      id: 0, //搜索词汇的id
      search_result: [],
      start: 0,
      word: "",
      // count: 0,
    };
  },
  watch: {
    async word(newVal, oldVal) {
      // if (v.length == 0) {
      //   this.isListShow = false;
      //   this.isHasRes = false;
      //   return false;
      // }
      console.log(newVal, oldVal);
      // this.queryByname(v);
    },

    search_result(newVal, oldVal) {
      // console.log(newVal, oldVal);
    },
  },

  methods: {
    goBack() {
      this.$router.push({ path: "/index/home" });
    },
    async queryByname(v) {
      let { data } = await axios.get(
        ` http://localhost:8080/api/search?keyword=${v}&num=20&start=1&appkey=d9c770661cb89052d8785cadce76e57a`
      );
      if (data.code == 10000) {
        let res = data.result.result.list;
        if (res == undefined) {
          this.isHasRes = true;
          this.isListShow = false;
          return false;
        } else {
          this.inpList = res;
          this.isListShow = true;
          this.isHasRes = false;
        }
      }
    },
    search() {
      if (this.sName == "") {
        return false;
      }
      this.isHasRes = false;
      this.isListShow = false;
      this.$refs["input"].focus();
      axios
        .get(
          `/search?keyword=${this.sName}&num=10&start=${this.start}&appkey=d9c770661cb89052d8785cadce76e57a`
        )
        .then((response) => {
          if (response.data.code == 10000) {
            let res = response.data.result.result.list;
            if (res == undefined) {
              return false;
            }
            this.search_result = res;
            this.word = this.sName;
            this.histList.push(this.word);
            console.log(this.histList);
            this.$router.push({
              path: "/list",
              query: {
                name: this.word,
                start: this.start,
              },
            });
            localStorage.setItem("list", JSON.stringify(this.search_result));

            // let f = this.histList.some((item) => item.name == this.sName);
            // if (!f) {
            // console.log(this.word);
            // let obj = {
            //   id: ++this.id,
            //   name: this.word,
            // };

            // }
          }
        });
    },
  },
  mounted() {
    this.sName = this.$route.query.name;
    // this.queryByname(this.$route.query.name);
    this.histList = JSON.parse(localStorage.getItem("historylist"));
  },
};
</script>

<style lang="less" scoped>
@searchfC: #666;
@bgColor: #e6e6e6;
.form {
  width: 100%;
  height: 100%;
  // position: relative;
  padding-top: 50px;
  .van-icon {
    font-size: 16px;
    margin-top: 15px;
  }
  .search {
    .search-inp {
      font-size: 14px;
      color: @searchfC;
      background-color: @bgColor;
    }
  }
  .text {
    font-size: 16px;
    margin: 6px 6px 0 0;
    color: #aaa9a9;
  }
  .search-content {
    height: 100%;
    height: 500px;
  }
  .inp-result {
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;

    .rnull {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }
    .inp-list {
      height: 100%;
      background-color: #fff;
      li {
        padding: 15px;
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>